<template>

    <div id="tmpl">
        <!--//评论组件-->
        <!--1.0 实现评论数据到服务器的静态结构-->
        <div id="postcomment">
            <h4>提交评论</h4>
            <p class='p'></p>
            <textarea  cols="30" rows="10" placeholder='请输入需要评论的内容' v-model='postcontent'></textarea>
            <mt-button type='danager' size='larger' @click='postcomment'>发表</mt-button>
        </div>
        <!--2.0实现获取评论数据的列表-->
        <div id="list">
            <h4>评论列表</h4>
            <p class='p'></p>
            <div v-for='(item ,index) in list'>
                <div class="title">
                    <span>第{{index+1}}楼</span>
                    <span> 用户：{{item.user_name}}</span>
                    <span>{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
                </div>
                <ul class='mui-table-view'>
                    <li class = 'mui-table-view-cell' v-text='item.content'></li>

                </ul>
            </div>
        </div>
        <!--3.0实现获取更多按钮-->
        <mt-button type='danager' size='larger' plain @click ='getmore'>加载更多</mt-button>
    </div>
</template>
<script>
    import common from '../../kits/common.js';
    import { Toast } from 'mint-ui';
    export default {
        props:["id"] ,       //用来接收父组件传过来的值
        data(){
            return {
                pageindex:'',
                postcontent:'', //用来自动获取用户填写的评论内容
                list:[]   //评论数据的数组
            }
        },
        created(){
            //1.0获取当前资讯数据的评论信息列表
            this.getcommentlist(this.pageindex);
        },
        methods:{
            //3.0实现加载更多的方法
            getmore(){
              this.pageindex ++;
              this.getcommentlist(this.pageindex);
            },
            //2.0 获取当前数据的评论数据pageindex代表的是当前获取的是那一页的数据，默认值是1
            getcommnetlist(pageindex){
                pageindex = pageindex ||1;
                //1.0 确定评论数据的url
                var url = common.apidomain + '/api/getcomments/'+this.id+'?pageindex='+pageindex;
                //发出ajax请求获取数据即可
                this.$http.get(url).then(function(res){
                    if(res.body.status != 0){
                        Toast(res.body.message);
                        return;
                    }
                    this.list =this.list.concat( res.body.message);
                });
            },
            //评论数据的提交
            postcomment(){
                //0.0判断用户是否填写评论内容
                if(this.postcomment.trim().length <= 0){
                    Toast('输入的内容不能为空');
                    return;
                }

                //1.0确定提交的地址"/api/postcomment/:artid"
                var  url = common.apidomain + "/api/postcomment/" + this.id ;
                //2.0利用ajax的post请求将数据提交到指定的地址
                //2.0.1 获取用户在文本框中填写的评论内容，通过content：内容格式提交到请求报文体中
                this.$http.post(url,{content:this.postcontent},{emulateJSON:true}).then(function(res){
                    if(res.body.status != 0){
                        Toast(res.body.message);
                        return;
                    }
                    Toast('发表成功');

                    //3.0将最新的评论数据添加到评论的最顶部
                    this.list = [{
                        'uer_name':'匿名用户',
                        'add_time':new Date(),
                        'content':this.postconent
                    }].concat(this.list);
                    //将发表评论的文本域清空
                    this.postcomment = '';
                });
            }
        }
    }

</script>
<style scoped>
    #postcomment{
        padding: 5px;
    }
    .p {
        height:1px;
        width: 100%;
        border-bottom:1px solid rgba(0,0,0,.3);
    }
    /* 2.0评论列表的样式*/
    .title{
        margin:20px 15px 7px;
        color:#6d6d72;
        font-size:15px;
    }
</style>
